<#include "/include/lib.html"/>
<style>
	
</style>
<div class="mini-layout" style="width:100%;height:100%;" borderStyle="border:solid 1px #aaa;">
    <div title="1.连接数据库" region="north" class="app-header" showHeader="true" bodyStyle="overflow:hidden;" height="100" showSplit="true">
		<div style="height:100px;">
			<div style="padding-top:10px;padding-bottom:10px;border:1px solid #bdbdbd;border-top:none;" id="con-form">
				<table class="mg-table">
					<tr>
						<th>主机地址(ip):</th>
						<td><input type="text" class="mini-textbox" required="true" name="host" value="127.0.0.1"></td>

						<th>用户名:</th>
						<td><input type="text" class="mini-textbox" required="true" name="username" value="root"></td>

						<th>密码:</th>
						<td><input type="password" class="mini-textbox" required="true" name="password" value="root"></td>
						<td rowspan="2">
							<span style="margin-left:20px;"><button onclick="submitForm();" class="mg-btn btn-blue btn-radius">连接数据库</button></span>
						</td>
					</tr>
					<tr>
						<th>端口:</th>
						<td><input type="text" class="mini-textbox" required="true" name="port" vtype="range:0,56635" value="3306"></td>

						<th>数据库:</th>
						<td><input type="text" class="mini-textbox" name="dbName" required="true"></td>

						<th>数据库类型</th>
						<td>
							<select name="dbType" class="mini-combobox">
								<option value="mysql">mysql</option>
								<option value="oracle">oracle</option>
								<option value="sqlserver">sqlserver</option>
							</select>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<div title="2.选择数据表" region="west" class="app-header"  showHeader="true" bodyStyle="overflow:hidden;margin-left:2px;" showSplit="false" width="305">
		<div style="width:304px;height:420px;overflow:auto;">
			<ul id="table-tree" class="mini-tree" style="width:300px;margin:0px;padding:0px;" 
			    showTreeIcon="true" textField="name" idField="id" parentField="pid" resultAsTree="true">        
			</ul>
		</div>
		<div style="position:relative;text-align:right;padding-right:10px;" id="table-info">未连接数据库。</div>
	</div>
	<div title="center" region="center" class="app-header" bodyStyle="overflow:hidden;" height="80" showHeader="false" showSplit="true">
		<#include "genCode.html">
	</div>
</div>
<script>
(function(){
	mini.parse();
})();
function submitForm() {
    var form = new mini.Form("#con-form");
    form.validate();
    if (form.isValid() == false) return;
    //提交数据
    var data = form.getData();      
    var json = mini.encode(data);  
    $.ajax({
        url: "${root!}/gcode/condb",
        type: "post",
        data: {submitData: json },
        datatype:'json',
        success: function (res) {
           	console.info(res);
           	//初始化第二步树
           	var tree = mini.get("table-tree");
           	tree.loadData(res);
           	$("#table-info").text("共有"+res[0].children.length+"张表。");
        }
    });
}
//获得选中节点
function getSelectedNode(){
	var tree = mini.get("table-tree");
	return tree.getSelectedNode();
}
</script>

